<template>
    <div class="warp margin-bottom-20" :class="[isMine?'isMine':'no-isMine']">
        <!--        <avatar :src="avatar" :type="conversation.type"/>-->
        <div class="left">
            <div class="header flex color-grey" :class="{'m-header' : isDesMobile}">
                <div class="name text-ellipsis padding-right-10">{{ from }}</div>
                <div class="date">{{ date }}</div>
            </div>
            <!--            message content-->
            <div :class="[isMine?'isMine':'no-isMine']" class="margin-top-bottom-10 contentBox">
                <span class="padding-left-right-10"><a href="">对方提醒邀约</a></span>
            </div>
        </div>
        <div class="right">
            <div class="wrapperimage" style="width: 50px;height: 50px;border-radius: 100%;margin-top:10px;">
                <!--                <img :src="userImage" alt="" style="width: 50px;height: 50px;border-radius: 100%"/>-->
                <el-image
                        style="width: 35px; height: 35px;border-radius: 100%;"
                        :src="userImage||defaultImage"
                        :fit="userImage?'none':'fill'"></el-image>
            </div>
        </div>

    </div>

</template>

<script>
    import {isToday, getDate, getTime, getFullDate} from '@/tim/date'
    import messageStoreMixin from "@/store/message/messageStoreMixin";
    import {decodeText} from "./decodeText";
    import defaultImage from '@/assets/images/avatar.png'
    import {mapGetters} from "vuex";
    import {getLoginUser} from "@/tim";

    export default {
        mixins: [messageStoreMixin],
        name: 'messageItem-item',
        props: ['message'],
        components: {avatar: () => import("./avatar")},
        computed: {
            ...mapGetters("mobile", [
                "isDesMobile"
            ]),
            toUserImage() {
                return this.currentConversation
                    && this.currentConversation.userProfile
                    && this.currentConversation.userProfile.avatar
            },
            userImage() {
                var userid = this.message.from
                var user = getLoginUser()
                console.log(user)
                if (user.contactId == userid || user.id == userid) {
                    return user.portrait
                }
                return this.message && this.message.avatar || this.toUserImage
            },
            contentList() {
                return this.message && this.message.payload && decodeText(this.message.payload)
            },
            from() {
                const isC2C = this.currentConversation.type === window.TIM.TYPES.CONV_C2C
                // 自己发送的用昵称渲染
                if (this.isMine) {
                    return this.currentUser.nick
                        || this.currentUser.userID
                        || this.currentUser.mobilePhone
                        || this.currentUser.id
                }
                // 1. C2C 的消息体中还无 nick / avatar 字段，需从 conversation.userProfile 中获取
                if (isC2C) {
                    return (
                        this.currentConversation.userProfile.nick ||
                        this.currentConversation.userProfile.userID ||
                        this.currentConversation.userProfile.mobilePhone
                    )
                } else if (this.currentConversation.type === window.TIM.TYPES.CONV_SYSTEM) {
                    return this.message.type === window.TIM.TYPES.MSG_GRP_SYS_NOTICE
                        ? '群系统通知'
                        : '系统通知'
                }
                // 2. 群组消息，用消息体中的 nick 渲染。nameCard暂时支持不完善
                return this.message.nick || this.message.from
            },
            date() {
                return getFullDate(new Date(this.message.time * 1000))
            },
            isMine() {
                // console.log(this.currentUserProfile, this.currentConversation);
                return this.message.flow === 'out'
            },
        },
        data() {
            return {
                popoverVisible: false,
                hasMessageAtMe: false,
                defaultImage: defaultImage
            }
        },
    }
</script>

<style scoped>
    .isMine {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        justify-content: flex-end;
    }

    .contentBox.isMine {
        padding: 10px;
        background-color: #5cadff;
        margin-right: 10px;
        border-radius: 5px 0px 5px 5px;
        color: #fff;
        position: relative;
    }


    /* .triangle-right {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-left: 10px solid #5cadff;
        border-bottom: 5px solid transparent;
        position: absolute;
        top: 0px;
        right: -9px;
    }*/

    /*  .triangle-left {
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-right: 10px solid #ddd;
          border-bottom: 5px solid transparent;
          position: absolute;
          top: 0px;
          left: -10px;
      }*/

    .contentBox.no-isMine {
        padding: 10px;
        color: #222;
        background-color: #fff;
        margin-right: 10px;
        border-radius: 5px 5px 5px 0px;
        position: relative;
        margin-left: 10px;
        border: 1px solid #ddd;
    }


    .no-isMine {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row-reverse;
    }

    .m-header {
        font-size: 12px;
    }
</style>
